$(function () {
    let perSize = 8;//页面显示的条数(随着页码改变而改变)
    let currentPage = 1;//当前显示的页码(随着页码改变而改变)
    let totalPage = -1;//总共的页数（随着数据改变而改变）
    let totalCount;//员工表总共的条数
    let temporaryArray = [];//临时储存数据
//员工管理

    employeeDel();//删除
    employeeLook();//查看员工信息
    employeeEdit();//编辑员工信息addEmployee
    employeeLookup();//查找员工
    pageClick();//点击页面
    employeeAdd();//添加员工
    selectAll();//全选
    employeeAllDelete();//删除选取的员工
    initData(currentPage);//获取数据库里的员工数据

    function initData(currentPage) {
        // 清空初始化加载时加载的数据
        temporaryArray = [];
        var Page = {currentPage : currentPage, perSize : perSize};
        // ajax默认是异步处理状态，异步处理状态是非阻塞状态
        $.ajax({
            url: "QueryEmployeeByPageServlet",            // 查询所有部门
            type: "post",                // 请求的方式，不区分大小写
            async: true,                 // 是否异步，true是默认值，false为同步请求
            cache: false,                // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
            contentType: "application/json;charset=utf-8",
            datatype: "json",            // 返回类型，text文本、html页面、json数据
            data:JSON.stringify(Page), // 全部查询，不需要请求参数
            success: function (data) {
                alert("成功数据: " + JSON.stringify(data));
                for (var i = 0; i < data.length; i++) {
                    var onlyJSON = data[i];
                    temporaryArray[i] = {
                        "empId": onlyJSON.empId,
                        "empName": onlyJSON.empName,
                        "empSex": onlyJSON.empSex,
                        "empBirth": new Date(onlyJSON.empBirth).toLocaleDateString(),
                        "empEducation": onlyJSON.empEducation,
                        "empTel" : onlyJSON.empTel,
                        "depotName" : onlyJSON.depotName,
                        "workName" : onlyJSON.workName,
                        "empMajor" : onlyJSON.empMajor,
                        "empAddress" : onlyJSON.empAddress,
                        "empOutlook" : onlyJSON.empOutlook,
                        "empEntryTime" : new Date(onlyJSON.empEntryTime).toLocaleDateString(),
                    };
                }
                //  目前通过一个ajax异步请求获取了后台的部门数据
                //  将后台的数据转换为 depotArray
                //  这是应该执行方法 让depotArray 的数据显示在页面
                employeeTableShow();
                employeePage();
            },
            error: function (response) {
                alert("失败数据: " + JSON.stringify(response));
            }
        });
    }

//员工信息显示，并且在表格内显示
    function employeeTableShow() {
        let array;
        array = temporaryArray;
        $("#employeeTable").empty();
        if (currentPage === 0) {        //如果当前页面为0，就初始化当前页面变为1
            currentPage = 1;
        }
        let outHtml = "";//加入的每一条内容
        for (let i = 0; i < array.length; i++) {
            let id = array[i].empId;
            let name = array[i].empName;
            let sex = array[i].empSex;
            let date = array[i].empBirth;
            let education = array[i].empEducation;
            let phone = array[i].empTel;
            let department = array[i].depotName;
            let position = array[i].workName;
            $("#employeeTable").append(`<tr class="tableTr">
        <td><input type="checkbox" class="checkBox" data-index='${i}'></td>
        <td class="hidden">${id}</td>
        <td class="name">${name}</td>
        <td>${sex}</td>
        <td>${date}</td>
        <td>${education}</td>
        <td>${phone}</td>
        <td class="department">${department}</td>
        <td>${position}</td>
        <td class="center">
            <span data-index='${i}' title="查看" class="employeeLook font">&#xe544;</span>
            <span data-index='${i}' title="编辑" class="employeeEdit font">&#xe63c;</span>
            <span data-index='${i}' title="删除" class="employeeDel font">&#xe66e;</span>
</td>
        </tr>`);
        }
        $("employeeTable").html(outHtml);
    }


//表格页码显示
    function employeePage() {
        $.ajax({
            url:"QueryEmployeeCountServlet",     // 更新选中部门信息
            type:"post",                // 请求的方式，不区分大小写
            async:true,                 // 是否异步，true是默认值，false为同步请求
            cache:false,                // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
            contentType:"application/json;charset=utf-8",
            datatype:"json",            // 返回类型，text文本、html页面、json数据
            success:function(data){
                alert("数据: " + JSON.stringify(data));
                if (data.Status == 'success') {
                    totalCount = data.Count;
                    totalPage = Math.ceil(totalCount / perSize);
                    if (currentPage > totalPage) {   //如果当前页码大于总页码，则当前页码等于总页码
                        currentPage = totalPage;
                    }
                    $("#employeeTablePage").html("");
                    let str = "";
                    for (let i = 0; i < totalPage; i++) {
                        if (currentPage == (i + 1)) {
                            str += `<button class="btn pageBtn btn-primary page">${i + 1}</button>`;
                        } else {
                            str += `<button class="btn pageBtn btn-default page">${i + 1}</button>`;
                        }
                    }
                    $("#employeeTablePage").html(str);
                } else {
                    AjaxErro(data);
                }
            },
            error:function(response){
                alert("出错" + response);
            }
        });
    }

//点击页面
    function pageClick() {
        $("#pre").hide();
        let pageClick = $("#employeeTablePage").on("click", ".pageBtn", function () {
            $(".btn").each(function (index, item) {
                $(this).removeClass('btn-primary');//移除btn选中的样式
            });
            $(this).addClass('btn-primary');//添加btn选中的样式
            currentPage = Number(this.innerText);//当前页面等于btn内容
            if (currentPage > 1) {
                $("#pre").show();
            } else if (currentPage == 1) {
                $("#pre").hide();
            }
            if (currentPage == totalPage) {
                $("#next").hide();
            }
            if (currentPage < totalPage) {
                $("#next").show();
            }
            initData(currentPage);
        });
        //点击上一页显示页码和表格内容
        $("#btn-page").on("click", "#pre", function () {
            currentPage = currentPage - 1;//点击上一页，当前页面减一
            if (currentPage > 1) {
                $("#pre").show();
            } else if (currentPage == 1) {
                $("#pre").hide();
            }
            if (currentPage == totalPage) {
                $("#next").hide();
            }
            if (currentPage < totalPage) {
                $("#next").show();
            }
            initData(currentPage);//重新获取数据并显示
        });
        //点击下一页显示页码和表格内容
        $("#btn-page").on("click", "#next", function () {
            currentPage = currentPage + 1;//点击上一页，当前页面加
            if (currentPage > 1) {
                $("#pre").show();
            } else if (currentPage == 1) {
                $("#pre").hide();
            }
            if (currentPage == totalPage) {
                $("#next").hide();
            }
            if (currentPage < totalPage) {
                $("#next").show();
            }
            initData(currentPage);//重新获取数据并显示
        })
    }

//删除员工
    function employeeDel() {
        $("#employeeTable").on("click", ".employeeDel", function () {
            let employeeIdValue = $(this).parent().parent().find(".hidden").text();//得到此员工所在原始数据的id
            JsonData = {empId : employeeIdValue};
            $.ajax({
                url:"DeleteEmployeeServlet",     // 更新选中部门信息
                type:"post",                // 请求的方式，不区分大小写
                async:true,                 // 是否异步，true是默认值，false为同步请求
                cache:false,                // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                contentType:"application/json;charset=utf-8",
                datatype:"json",            // 返回类型，text文本、html页面、json数据
                data:JSON.stringify(JsonData),   // 条件查询请求参数
                success:function(data){
                    alert("数据: " + JSON.stringify(data));
                    if (data.Status == 'success') {
                        initData(currentPage);
                    } else {
                        AjaxErro(data);
                    }
                },
                error:function(response){
                    alert("出错" + response);
                }
            });
        })
    }

//查看员工信息
    function employeeLook() {
        $("#employeeTable").on("click", ".employeeLook", function () {
            let array;
            array = temporaryArray;
            $("#save").attr("class", "btn btn-primary hidden");
            $("#add").attr("class", "btn btn-primary hidden");
            $("#modal").modal('show');
            $(".modal-title").text("员工信息");
            let index = $(this).attr('data-index');//得到这个数据在数组中的下标
            $("#name").html(array[index].empName);
            $("#sex").html(array[index].empSex);
            $("#date").html(array[index].empBirth);
            $("#education").html(array[index].empEducation);
            $("#major").html(array[index].empMajor);
            $("#phone").html(array[index].empTel);
            $("#address").html(array[index].empAddress);
            $("#political").html(array[index].empOutlook);
            $("#department").html(array[index].depotName);
            $("#position").html(array[index].workName);
            $("#entryTime").html(array[index].empEntryTime);
        })
    }

//修改员工信息
    function employeeEdit() {
        let index;//得到这个数据在数组中的下标
        $("#employeeTable").on("click", ".employeeEdit", function () {
            let array;
            array = temporaryArray;
            $("#save").attr("class", "btn btn-primary");
            $("#add").attr("class", "btn btn-primary hidden");
            $("#modal").modal('show');
            $(".modal-title").text("编辑信息");
            index = $(this).attr('data-index');//得到这个数据在数组中的下标
            $("#name").html(array[index].empName);
            $("#sex").html(array[index].empSex);
            $("#date").html(array[index].empBirth);
            $("#education").html(array[index].empEducation);
            $("#major").html(array[index].empMajor);
            $("#phone").html("<input id='editPhone' type='text' class='editInput' value=" + array[index].empTel + ">");
            $("#address").html(array[index].empAddress);
            $("#political").html("<select id='editPolitical'><option value='1'>共产党员</option><option selected=selected value='2'>群众</option><option>民主党员</option></select>");
            $("#department").html("<select id='editDepartment'>" +
                "<option value='1'>人事部</option><option value='2'>市场部</option>" +
                "</select>");
            $("#position").html("<select id='editPosition'>" +
                "<option>人事经理</option><option>人事专员</option>" +
                "</select>");
            $("#entryTime").html(array[index].empEntryTime);
            $("#editDepartment").change(function () {        //一级选项，二级选项改变
                let selectValue = $("#editDepartment").val();
                if (selectValue == 1) {
                    $("#position").html("<select id='editPosition'>><option>人事经理</option><option>人事专员</option></select>");
                } else if (selectValue == 2) {
                    $("#position").html("<select id='editPosition'>><option>市场部经理</option><option>市场专员</option></select>");
                }
            });
        });
        $(".modal-footer").on("click", "#save", function () {
            employeeArray[index].empTel = $("#editPhone").val();
            employeeArray[index].empOutlook = $("#editPolitical option:selected").text();
            employeeArray[index].depotName = $("#editDepartment option:selected").text();
            employeeArray[index].workName = $("#editPosition option:selected").text();
            let empId = employeeArray[index].empId;
            let empTel = employeeArray[index].empTel;
            let depotName = employeeArray[index].depotName;
            let workName = employeeArray[index].workName;
            JsonData = {empId : empId, empTel : empTel, depotName : depotName, workName : workName, currentPage : currentPage, perSize : perSize};
            $.ajax({
                url:"UpdateEmployeeServlet",     // 更新选中部门信息
                type:"post",                // 请求的方式，不区分大小写
                async:true,                 // 是否异步，true是默认值，false为同步请求
                cache:false,                // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                contentType:"application/json;charset=utf-8",
                datatype:"json",            // 返回类型，text文本、html页面、json数据
                data:JSON.stringify(JsonData),   // 条件查询请求参数
                success:function(data){
                    alert("数据: " + JSON.stringify(data));
                    if (data.Status == 'success') {
                        initData(currentPage);
                    } else {
                        AjaxErro(data);
                    }
                },
                error:function(response){
                    alert("出错" + response);
                }
            });
        })
    }

//查找员工信息
    function employeeLookup() {
        $("#lookUp").click(function () {
            temporaryArray = [];//清空临时数据内容
            let selectValue = $("#lookSelect option:selected").attr("value");//下拉框选择value值
            let inputValue = $("#lookInput").val();//输入框输入的值
            JsonData = {selectValue : selectValue, inputValue : inputValue};
            $.ajax({
                url:"QueryEmployeeByEmpNameServlet",     // 更新选中部门信息
                type:"post",                // 请求的方式，不区分大小写
                async:true,                 // 是否异步，true是默认值，false为同步请求
                cache:false,                // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                contentType:"application/json;charset=utf-8",
                datatype:"json",            // 返回类型，text文本、html页面、json数据
                data:JSON.stringify(JsonData),   // 条件查询请求参数
                success:function(data){
                    alert("数据: " + JSON.stringify(data));
                    for (var i = 0; i < data.length; i++) {
                        var onlyJSON = data[i];
                        temporaryArray[i] = {
                            "empId": onlyJSON.empId,
                            "empName": onlyJSON.empName,
                            "empSex": onlyJSON.empSex,
                            "empBirth": new Date(onlyJSON.empBirth).toLocaleDateString(),
                            "empEducation": onlyJSON.empEducation,
                            "empTel": onlyJSON.empTel,
                            "depotName": onlyJSON.depotName,
                            "workName": onlyJSON.workName,
                        };
                    }
                    employeeTableShow();
                },
                error:function(response){
                    alert("出错" + response);
                }
            });
        });
    }

//添加新员工
    function employeeAdd() {
        $("#addEmployee").click(function () {
            $("#add").attr("class", "btn btn-primary");
            $("#save").attr("class", "btn btn-primary hidden");
            $("#modal").modal('show');
            $(".modal-title").text("添加员工");
            $("#name").html("<input class='addInput' id='addName' type='text'>");
            $("#sex").html("<input class='addInput' id='man' name='sex' value='男' type='radio' checked='checked'><label for='man'>男</label>" + "<input id='woman' name='sex' value='女' type='radio'><label for='woman'>女</label>");
            $("#date").html("<input class='addInput' id='addDate' type='text'>");
            $("#education").html("<select id='addEducation'><option>本科</option><option>高中</option></select>");
            $("#major").html("<input class='addInput' id='addMajor' type='text'>");
            $("#phone").html("<input class='addInput' id='addPhone' type='text'>");
            $("#address").html("<input class='addInput' id='addAddress' type='text'>");
            $("#political").html("<select id='addPolitical'><option>党员</option><option>群众</option></select>");
            $("#department").html("<select id='addDepartment'><option value='1'>人事部</option><option value='2'>财务部</option></select>");
            $("#position").html("<select class='addPosition'><option>人事经理</option><option>人事专员</option></select>");
            $("#entryTime").html("<input class='addInput' id='addEntryTime' type='text'>");
            $("#addDepartment").change(function () {        //一级选项，二级选项改变
                let selectValue = $("#addDepartment").val();
                if (selectValue == 1) {
                    $("#position").html("<select class='addPosition'><option>人事经理</option><option>人事专员</option></select>");
                } else if (selectValue == 2) {
                    $("#position").html("<select class='addPosition'><option>财务经理</option><option>会计</option></select>");
                }
            });
        });
        $(".modal-footer").on("click", "#add", function () {
            let empName = $("#addName").val();
            let empSex =  $('input[name="sex"]:checked').val();
            let empBirth = $("#addDate").val();
            let empEducation = $("#addEducation").val();
            let empTel = $("#addPhone").val();
            let depotName = $("#addDepartment option:selected").text();
            let workName = $(".addPosition option:selected").val();
            JsonData = {empName : empName, empSex : empSex, empBirth : empBirth,
                empEducation : empEducation, empTel : empTel, depotName : depotName, workName : workName};
            $.ajax({
                url:"AddEmployeeServlet",     // 更新选中部门信息
                type:"post",                // 请求的方式，不区分大小写
                async:true,                 // 是否异步，true是默认值，false为同步请求
                cache:false,                // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                contentType:"application/json;charset=utf-8",
                datatype:"json",            // 返回类型，text文本、html页面、json数据
                data:JSON.stringify(JsonData),   // 条件查询请求参数
                success:function(data){
                    alert("数据: " + JSON.stringify(data));
                    if (data.Status == 'success') {
                        initData(currentPage);
                    } else {
                        AjaxErro(data);
                    }
                },
                error:function(response){
                    alert("出错" + response);
                }
            });
        });
    }

//全选
    function selectAll() {
        $("#selectAll").click(function () {
            let checked = this.checked;
            $(".checkBox").each(function (index, item) {
                item.checked = checked;
            })
        });
    }

//删除所选员工
    function employeeAllDelete() {
        $("#delEmployee").click(function () {
            let checked = $("input[class='checkBox']:checked");
            for (let i = 0; i < checked.length; i++) {
                let employeeIdValue = $(checked[i]).parent().parent().find(".hidden").text();//得到此员工所在原始数据的id
                JsonData = {empId : employeeIdValue};
                $.ajax({
                    url: "DeleteEmployeeServlet",     // 更新选中部门信息
                    type: "post",                // 请求的方式，不区分大小写
                    async: true,                 // 是否异步，true是默认值，false为同步请求
                    cache: false,                // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                    contentType: "application/json;charset=utf-8",
                    datatype: "json",            // 返回类型，text文本、html页面、json数据
                    data: JSON.stringify(JsonData),   // 条件查询请求参数
                    success: function (data) {
                        alert("数据: " + JSON.stringify(data));
                        initData(currentPage);
                    },
                    error: function (response) {
                        alert("出错" + response);
                    }
                });
            }
        });
    }
});